<template>
  <div class="bigbox">
   <div class="topbox">
      <div >
          <template>
          <el-select v-model="form.region" clearable   placeholder="事件分类" @change="changefenlei"  size="medium" >
          <el-option class="select" v-for="(item,index) in fenleidata" :key="index" :label="item.text" :value="item.value"></el-option>
        </el-select>
        <template>
          <el-select v-model="form.text" clearable    placeholder="分组标签" style="margin: 0 10px 0 10px;" @change="changefenzu"  size="medium">
          <el-option class="select" v-for="(item,index) in fenzudata" :key="index" :label="item.text" :value="item.text"></el-option>
        </el-select>
        </template>
        <el-input style="width: 300px;height: 32px;" v-model="input"  suffix-icon="el-icon-search" placeholder="请输入检索关键字" size="medium"></el-input  >
       </template>
      </div>
      <div><button class="button" @click="dialogVisible=true" style=" cursor: pointer;">新增</button></div>
   </div>
   <div class="table">
    <!-- 封装表格 -->
    <template>
  <el-table
    :data="tableData"
    border
    highlight-current-row
    :header-cell-style="{background:'#f5f5f5','text-align':'center'}"
    style="width: 100% "
    height="100%"
    >
    <el-table-column
      prop="eventType"
      label="事件类型编码"
      >
    </el-table-column>
    <el-table-column
      prop="eventName"
      label="事件类型名称"
      width="300">
    </el-table-column>
    <el-table-column
      prop="eventLevel"
      label="重要等级">
      <template #default="{row}">
       <span>{{ row.eventLevel===3?'严重告警':row.eventLevel===2?'普通告警':row.eventLevel===1?'轻微告警':'一般事件' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="eventSort"
      label="事件分类"
      >
      <template #default="{row}">
         <span>{{ row.eventSort===1?'配电运行告警':row.eventSort===2?'环境异常报警':row.eventSort===3?'用电设备告警':row.eventSort===4?'计量设备报警':row.eventSort===5?'光伏设备告警':row.eventSort===6?'充电直流告警':row.eventSort===7?'充电直流故障':row.eventSort===8?'充电交流告警':row.eventSort===9?'充电交流故障':row.eventSort===10?'工厂基本电费告警':'常规告警' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="eventGroup"
      label="分组标签"
      >
      <template #default="{row}">
       <span>{{ row.eventGroup==='YC'?'遥测':row.eventGroup==='YX'?'遥信':'其他' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="操作"
      align="center">
      <template #default="{row}">
            <span @click="xiugai(row)">
              <i
                class="el-icon-edit"
                style="color: skyblue; margin-left: 30px;cursor: pointer;"
              ></i
            ></span>
            <span @click="del(row)">
              <i
                class="el-icon-delete"
                style="color: red; margin-left: 30px;cursor: pointer;"
              ></i
            ></span>
          </template>
    </el-table-column>
  </el-table>
</template>
   </div>
   <div>
    <el-dialog
  title="提示"
  :visible.sync="dialogVisible"
  width="30%"
  :showClose="false"
  @close="quxiao"
  >
  <div>
    <el-form :model="formdata"  label-width="140px" :rules="rules" ref="refform">
       <el-form-item label="事件分类:" prop="eventSort">
        <el-select v-model="formdata.eventSort" placeholder="请选择事件分类" style="width: 220px;" size="mini">
          <el-option class="select" v-for="(item,index) in fenleidata" :key="index" :label="item.text" :value="item.value"></el-option>
        </el-select>
       </el-form-item>
       <el-form-item label="类型编码:" prop="eventType" size="80" >
          <el-input v-model="formdata.eventType" style="width: 220px;margin-top: 5px;" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="类型名称:" prop="eventName">
          <el-input v-model="formdata.eventName" style="width: 220px;margin-top: 5px;" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="重要等级:" prop="eventLevel">
        <el-select v-model="formdata.eventLevel" placeholder="请选择重要等级" style="width: 220px;margin-right: 100px;margin-top: 5px;" size="mini">
          <el-option class="select" v-for="(item,index) in yandata" :key="index" :label="item.text" :value="item.value"></el-option>
        </el-select>
       </el-form-item>
       <el-form-item label="分组标签:" >
        <el-select v-model="formdata.eventGroup" placeholder="请选择分组标签" style="width: 220px;margin-top: 5px;" size="mini">
          <el-option class="select" v-for="(item,index) in fenzudata" :key="index" :label="item.text" :value="item.value"></el-option>
        </el-select>
       </el-form-item>
       <el-form-item label="是否告警:" prop="eventWarning">
          <el-switch v-model="formdata.eventWarning"></el-switch>
        </el-form-item>
    </el-form>
  </div>
  <span slot="footer" class="dialog-footer" style="margin-right: 60px;">
    <button class="dialogbutton sure" type="primary" @click="sure" style=" cursor: pointer;">确 定</button>
    <button class="dialogbutton" @click="quxiao" style=" cursor: pointer;">取 消</button>
  </span>
</el-dialog>
   </div>
  </div>
</template>

<script>
import { getceliangapi, getfenzuapi, getlistapi, getyanzhongapi, postshijianapi, putshijianapi, delshijianapi } from '@/api/ElectricalDistribution/IotTechnology/layout'
// import Tableself from '../../components/table/index'
export default {
  name: 'MaintenanceIndex',
  components: {
    // Tableself
  },
  data () {
    return {
      row: '',
      dialogVisible: false,
      form: {
        region: ''
      },
      formdata: {
        eventWarning: false
      },
      input: '',
      fenleidata: [],
      yandata: [],
      fenzudata: [],
      tableData: [],
      fenleival: '',
      fenzuval: '',
      rules: {
        eventSort: [
          { required: true, message: '请选择事件分类', trigger: 'blur' }
        ],
        eventType: [
          { required: true, message: '请输入类型编码', trigger: 'blur' }
        ],
        eventName: [
          { required: true, message: '请输入类型名称', trigger: 'blur' }
        ],
        eventLevel: [
          { required: true, message: '请选择重要等级', trigger: 'blur' }
        ]
      },
      tableDatas: [],
      isupdate:false
    }
  },
  async mounted () {
    const res = await getceliangapi()
    this.fenleidata = res.data.list
    const ress = await getfenzuapi()
    this.fenzudata = ress.data.list
    const resss = await getyanzhongapi()
    this.yandata = resss.data.list
    this.getdatalist()
  },
  methods: {
    async getdatalist (fenzu, fenlei) {
      const resss = await getlistapi({ eventGroup: fenzu, eventSort: fenlei })
      this.tableData = resss.data.list
    },
    changefenlei (fenleival) {
      this.fenleival = fenleival
    },
    changefenzu (fenzuval) {
      this.fenzuval = fenzuval === '遥测' ? 'YC' : fenzuval === '遥信' ? 'YX' : ''
    },
    async sure () {
      await this.$refs.refform.validate()
      if (this.isupdate) {
          const res = await putshijianapi(this.formdata)
          if(res.code=='200')this.$message.success('修改成功')
      } else {
         const res= await postshijianapi(this.formdata)
         if(res.code=='200') this.$message.success('新增成功')
      }
      this.dialogVisible = false
      this.formdata = {eventWarning:false}
      this.getdatalist(this.fenzuval, this.fenleival)
    },
    quxiao () {
      this.dialogVisible = false
      this.formdata = {eventWarning:false}
      this.isupdate = false
    },
    xiugai (row) {
      this.row = row
      this.isupdate=true
      this.formdata = { ...row }
      this.formdata.eventLevel = row.eventLevel.toString()
      this.formdata.eventSort = row.eventSort.toString()
      this.dialogVisible = true
    },
    del (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await delshijianapi({ eventType: row.eventType })
        if (res.code === 200) {
          this.$message.success('删除成功')
        }
        this.getdatalist(this.fenzuval, this.fenleival)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  },
  watch: {
    immediate: true,
    deep: true,
    async fenleival (val) {
      this.getdatalist(this.fenzuval, val)
    },
    async fenzuval (val) {
      this.getdatalist(val, +this.fenleival)
    },
    input (val) {
      if (val) {
        console.log('kkk')
      } else {
        this.getdatalist()
      }
      // const number = val === '严重告警' ? 3 : val === '普通告警' ? 2 : val === '轻微告警' ? 1 : val === '一般事件' ? 0 : ''
      // console.log(number)
      this.tableData = this.tableData.filter(ele => ele.eventName.indexOf(val) !== -1)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table thead{
 position: sticky;
 width:100%;
//  left:0px;
 top:0px;
 z-index: 2000;
}
.select{
  padding-left: 10px;
}
*{
  margin: 0;
  padding: 0;
}
::v-deep .el-form-item__error{
font-size: 18px !important;
zoom: 50% !important;
padding-top: 0px !important;
// color: #f5f5f5;
}
.bigbox{
height: 100%;
width: 100%;
padding: 5px !important;
background-color: #f1f1f1;
box-sizing: border-box;
}
.topbox{
  display: flex;
  height: 80px;
  justify-content: space-between;
  background-color: #fff;
  padding:20px;
  box-sizing: border-box;
}
.button{
  width: 63px;
  height: 32px;
  border-radius: 3px;
  color: #fff;
  border: 1px solid #ccc;
  background-color: #1890ff;
}
.table{
  margin: 10px 0 0 0 ;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  height: calc(100% - 90px);
}
.dialogbutton{
  width: 63px;
  height: 32px;
  border: 1px solid #ccc;
  border-radius: 7px;
  background-color: #fff;
}
.sure{
  background-color: #169bd5;
  color: #fff;
  margin-right: 10px;
}
</style>
